<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鱼缸网</title>
    <link rel="icon" type="image/x-icon" href="images/logo.ico">
     <style type="text/css">
     *{
     	margin:0px;
     	padding:0px;
     }
     #video{
     	width:1280px;
     	height: 815px;
     	margin: 0 auto;
     	border:solid 2px blue;
      background-color:rgb(255,118,115);
     } 
     .header{
        height:80px;
        border-bottom:#ff0 solid 3px;
        background-color:#ccc;
     }
     a{
        text-decoration:none;
        color: black;
        font-size:16px;
        font-weight:bold;
     }
     a:hover{
      color:#f77;
     }
     .nav>li{
        list-style: none;
        display:inline-block;
        width:160px;
        height:80px;
        text-align: center;
        line-height: 80px;
        margin-right: 10px;
        vertical-align:top;
     }
     .hide>li{
      list-style: none;
      position: relative;
      z-index: 999;
     }
     .nav{
        width:1280px;
        height:80px;
        margin:0 auto;
     }
     .hide{
        display: none;
     }
     .searcher{
        height:30px;
        position:relative;
        bottom:30px;
     }
     .search{
        display: inline-block; 
     }
     .search>img{
        position:relative;
        bottom:20px;
     }
     .hide>li>a{
      color:#000;
     }
     .hide>li{
      background-color:#ccc; 
    }
     .hide>li>a:hover{
      color:#f77;
     }
    .nav>li:hover .hide{
      display: block;
    }
    .content{
      width:1280px;
      height:1400px;
      border:2px solid blue;
      margin: 0 auto;
    }
    .downs{
      margin-right:298.5px;
    }
    h1{
      font-size: 48px;
      text-align:center;
      color: #a64fd6;
      margin-bottom: 32px;
    }
    #news{
      width:1000px;
      margin-left: 140px;
    }
    .couple{
      width: 800px;
      height: 200px;
      margin:0px auto;
      margin-top: 10px;
    }
    .man,.man>img{
      margin-right:100px;
      width:200px;
      height: 200px; 
      display: inline-block;
    }
    .love{
      display: inline-block;
      width: 400px;
      height:130px;
      border:2px dashed blue;
    }
    .p{
      font-size: 20px;
      font-weight: bold;
    }
    .love>span{
      font-size: 16px;
      font-weight:lighter;
    }
    .p-p{
      text-indent:2em;
    }
    .p-p>a{
      font-size: 16px;
      color:blue;
    }
    .p-p>a:hover{
      text-decoration: underline;
    }
    .form{
      padding-top: 80px;
      width: 1280px;
      height: 400px;
      margin:0px auto;
      border:2px solid blue;
    }
    .form>form{
      font-size:32px;
      text-align: center;
      line-height: 48px;
    }
    .password{
      width:320px;
      height:32px;
    }
    .user{
      width:320px;
      height:32px;
    }
    #number{
      width: 270px;
      height:32px;
    }
    .button{
      height:32px;
      width:80px;
    }
    #captcha{
      border:rgba(128, 128, 128, 0.466) 2px solid;
      width:60px;
      height:32px;
      float:right;
      font-size:18px;
      line-height: 32px;
      position:relative;
      right: 320px;
      bottom: 35px;
    }
    #xieyi{
      font-size: 20px;
      color:blue;
    }
    #xieyi:hover{
      text-decoration:underline;
    }
    .xieyi{
      font-size: 20px;
      position: relative;
      right:45px;
      bottom: 40px;
    }
    #submit,#register{
      width:120px;
      height:40px;
      font-size:28px;
      background-color: #a5bd6a;
    }
    #submit{
      position: relative;
      bottom:80px;
    }
    #register{
      position: relative;
      bottom:80px;
      left:80px;
    }
    .footer{
      height:450px;
      background-color: #444;
    }
  .footer-up{
    height: 330px;
    width: 1280px;
    margin:0 auto;
  }
  .footer-up-left{
    width: 311px;
    height: 330px;
    line-height:330px;
    position: relative;
    top: 70px;
    float: left;
  }
  .footer-up-left>img{
    width: 280px;
    height: 200px;
  }
  .footer-up-center{
    height: 172px;
    width: 458px;
    display: inline-block;
    margin-left: 40px;
    margin-top: 77px;
    line-height: 172px;
  }
  h2{
    font-size:24px;
    color:rgb(224,224,225);
    line-height: 55px;
  }
  .footer-p{
    font-size: 16px;
    color:rgb(224,224,225);
    line-height: 32px;
  }
  .footer-up-right{
    width: 365px;
    height: 170px;
    float: right;
    margin-top: 77px;
  }
  h3{
    font-size: 24px;
    color:rgb(255,255,255);
    margin-bottom:38px;
  }
  .footer-up-right img{
    margin-right: 10px;
    width: 104px;
    height: 105px;

  }
  .footer-down{
    height: 98px;
    border-top:solid #999 2px;
    text-align: center;
  }
  .footer-down-p{
    font-size: 14px;
    color: rgb(164,166,167);
    line-height: 30px;
    margin-top: 26px;
  }
  .banner{
    width: 1857px;;
    margin:0 auto;
  }
  .banner>img{
    width:1857px;
    height:500px;
  }
  .banner:hover #background{
    width:1000px;
    height:120px;
    background: url(images/background.png) no-repeat;
    margin:0px auto;
    position: absolute;
    top:450px;
    left:400px;
  }
  .picture{
    width: 1280px;
    height:960px;
    margin:0px auto;
    background-color: rgb(255,118,115);
    border:2px solid blue;
  }
  #left1{
      width: 285px;
      height:860px; 
      display: inline-block;
     } 
  #right1{
      width: 285px;
      height:860px;
      display: inline-block;
     }
  #left1>img,#right1>img{
        width:285px;
        height:285px;
     } 
  #left2{
      width: 285px;
      height:860px; 
      display: inline-block;
     } 
  #right2{
      width: 285px;
      height:860px;
      display: inline-block;
     }
  #left2>img,#right2>img{
        width:285px;
        height:285px;
     }
  #center{
    width:120px;
    display:inline-block;
    position:relative;
    bottom:30px;
  } 
  #center>p{
    text-align: center;
    font-size: 32px;
    line-height: 64px;
  }
  #bigpic{
    width: 620px;
    height:620px;
    float: left;
    position: absolute;
    top:3930px;
    left:480px;
  }
  #bigpicChild{
    width: 620px;
    height:620px;
  }
  #smallpic img:hover{
    cursor:pointer;  /*鼠标变成小手*/
  }
  .pb {
    border:3px solid red;
  }
     </style>
</head>
<body>
    <div class="header-top"></div>
    <div class="header">
        <ul class="nav">
           <img src="images/logo.jpg" alt="logo" style="width:80px;height:80px;margin-right:0px;">
           <li><a href="#">首页</a></li>
           <li><a href="#">鱼缸概况</a>
           <ul class="hide">
               <li><a href="#">鱼缸简介</a></li>
               <li><a href="#">鱼缸客户</a></li>
               <li><a href="#">鱼缸目标</a></li>
           </ul>
           </li>
           <li><a href="#">交友社区</a>
           <ul class="hide">
               <li><a href="#">男朋友</a></li>
               <li><a href="#">女朋友</a></li>
               <li><a href="#">Just朋友</a></li>
           </ul>
           </li>
           <li><a href="#">精品购物</a>
           <ul class="hide">
               <li><a href="#">送男友</a></li>
               <li><a href="#">送女友</a></li>
               <li><a href="#">送哥们</a></li>
               <li><a href="#">送闺蜜</a></li>
           </ul>
           </li>
           <li><a href="#">我的</a>
           <ul class="hide">
               <li><a href="#">消息</a></li>
               <li><a href="#">联系人</a></li>
               <li><a href="#">人工服务</a></li>
               <li><a href="#">反馈</a></li>
               <li><a href="#">设置</a></li>
           </ul>
           </li>
           <div class="search">
               <img src="images/search.png" alt="search"><input type="text" id="search" class="searcher" value="请输入您想搜索的内容">
            </div>
        </ul>
    </div>
    <div class="banner">
        <img src="images/banner.png" alt="banner">
        <div id="background"></div>
    </div>
    <div id="video">
      <h1>主题MV</h1>
    	<video src="images/yvgang.mp4" controls="controls"></video>
    </div>
    <div class="content">
      <img src="images/downs.png" class="downs">
      <img src="images/downs.png" class="downs">
      <img src="images/downs.png">
      <h1>喜讯乐闻</h1>
      <img src="images/news.jpg" id="news">
      <div class="couple">
        <div class="man"><img src="images/weather.png"></div>
        <div class="love"><span>2021.6.5</span><p class="p">高考天气地图出炉</p><p class="p-p">高考期间,鲁西北、鲁东南、半岛等地有雷雨或阵雨、小雨,考生要注意携带雨伞等物品,同时要注意安排好时间,避免因为降雨导致交通堵塞而耽误时间。 鲁中、鲁南等地几乎没有...<a href="#">详情&gt;&gt;</a></p><br><br></div>
      </div>
      <div class="couple">
        <div class="man"><img src="images/da.jpg"></div>
        <div class="love"><span>2021.6.5</span><p class="p">台媒曝大S离婚</p><p class="p-p">6月5日上午,台媒突曝大S汪小菲离婚。台媒称:大S徐熙媛稍早独家向台媒证实与老公汪小菲婚变,她说:离婚手续在办了。他的言行本人不予置评。 对此,汪小菲回应新浪财经...<a href="#">详情&gt;&gt;</a></p><br><br></div>
      </div>
      <div class="couple">
        <div class="man"><img src="images/three.png"></div>
        <div class="love"><span>2021.5.31</span><p class="p">三孩政策来啦!</p><p class="p-p">三孩政策，是积极应对人口老龄化，中国出台重大政策举措。2021年5月31日，中共中央政治局召开会议，会议指出，进... <a href="#">详情&gt;&gt;</a></p><br><br></div>
      </div>
    </div>
    <div class="form">
      <form method="post" action="#">
        <h1>鱼缸用户登录</h1>
        用户：<input type="text" value="请输入用户名或账号" name="user" class="user" id="username"><br>
        密码：<input type="text" value="请输入密码" name="password" class="password" id="passward"><br>
        验证码：<input type="text" value="请输入验证码" class="number" id="number"> </button><button class="button" id="btn1">获取验证码</button><br>
        <p id="captcha">验证码<p><br/>
        <p class="xieyi"><input type="checkbox" name="yes" id="yes"> 同意<a href="#" id="xieyi">协议</a>内容</p><br>
        <button id="submit">登录</button> <button id="register">注册</button>
      </form>
    </div>
    <div class="picture">
      <h1>情侣头像</h1>
      <div id="left1">
        <img src="images/male1.jpg" alt="male1">
        <img src="images/male2.jpg" alt="male2">
        <img src="images/male3.jpg" alt="male3">
      </div>
      <div id="right1">
        <img src="images/female1.jpg" alt="famale1">
        <img src="images/female2.jpg" alt="famale2">
        <img src="images/female3.jpg" alt="famale3">
      </div>
      <div id="center"><p>快</p><p>来</p><p>查</p><p>收</p><p>可</p><p>可</p><p>爱</p><p>爱</p><p>的</p><p>头</p><p>像</p><p>吧</p><p>!</p></div>
      <div id="left2">
        <img src="images/male4.png" alt="male4">
        <img src="images/male5.jpg" alt="male5">
        <img src="images/male6.jpg" alt="male6">
      </div>
      <div id="right2">
        <img src="images/female4.png" alt="famale4">
        <img src="images/female5.jpg" alt="famale5">
        <img src="images/female6.jpg" alt="famale6">
      </div>
    </div>
    <div class="footer">
      <div class="footer-up">
        <div class="footer-up-left">
          <img src="images/logo.jpg" alt="鱼缸"/ >
        </div>
        <div class="footer-up-center">
          <h2>联系我们</h2>
          <p class="footer-p">QQ：2873705188</p>
          <p class="footer-p">电话：15231680010 （9:00-18:00）</p>
          <p class="footer-p">邮箱：2873705188@qq.com</p>
          <p class="footer-p">地址：石家庄市裕华区裕翔街道南二环东路20号河北师范大学（新校区）诚朴园3号楼417室</p>
        </div>
        <div class="footer-up-right" id="smallpic">
          <h3>关注我们</h3>
          <img src="images/ewm2.jpg" alt="二维码" class="smallPic">
          <img src="images/ewm1.jpg" alt="二维码" class="smallPic">
          <img src="images/ewm3.jpg" alt="二维码" class="smallPic">
          <div id="bigpic"></div>
        </div>
      <div class="footer-down">
        <p class="footer-down-p"><br>版权信息：李氏集团科技有限公司所有<br>京ICP备：15006666号</p>
      </div>
    </div>
</body>
<script>
    var search=document.getElementById("search");
    var username=document.getElementById("username");
    var passward=document.getElementById("passward");
    var number=document.getElementById("number");
    var submit=document.getElementById("submit");
    var yes=document.getElementById("yes");
    var btn=document.getElementById("btn1");
    var captcha=document.getElementById("captcha");
    var bigpic=document.getElementById("bigpic");
    var smallPic=document.getElementsByClassName("smallPic");

    //第一个js效果：input框内的文字点击时清空
    var arr=[search,username,passward,number];
    for(var i=0;i<4;i++){
      arr[i].onclick = function(){
        this.value="";
      }
    }
    passward.onmouseleave=function(){
      if(passward.value!="请输入密码"){
        passward.setAttribute("type","password");
      }
    }

    //第二个效果：生成验证码
    var numberValueChoice="0123456789abcdefghijklmnopqrstuvwxyz";
    var numberValueFinal="";
    btn1.onclick=function(){
      var numberValue="";
      for(var j=0;j<4;j++){
        var numberBirth=parseInt(numberValueChoice.length*Math.random());
        numberValue+=numberValueChoice[numberBirth];
      }
      numberValueFinal=numberValue;
      captcha.innerHTML=numberValue;
      return false;
    }
    
    
    //第三个js效果：当用户名和密码和验证码均正确时，提示登录成功，否则提示登录错误
    submit.onclick = function(){
      if(username.value=="李博"&&passward.value=="loveme"&&number.value==numberValueFinal&&yes.checked==true){
        alert("登录成功！");
      }
      else{
        if(username.value!="李博"){
          alert("用户名错误！");
        }else if(passward.value!="loveme"){
          alert("密码错误！");
        }else if(number.value!=numberValueFinal){
          alert("验证码错误！");
        }else{
          alert("请同意用户协议！");
        }
        return false;
      }
    }

    //第四个效果：联系方式可放大
    var smallpic = document.getElementById("smallpic");
    var imgList = smallpic.getElementsByTagName("img");
    var bigpic = document.getElementById("bigpic");
     for(var i = 0; i < imgList.length; i++) {
         imgList[i].onmouseover = function() {
             for(var i = 0; i < imgList.length; i++) {
                 if(imgList[i].hasAttribute("class")) {
                    imgList[i].removeAttribute("class");
                 }
             }
             this.setAttribute("class", "pb");
             var newpic=document.createElement("img");
             bigpic.appendChild(newpic);
             var imgSrc = this.getAttribute("src");
             newpic.setAttribute("src", imgSrc);
             newpic.setAttribute("id","bigpicChild");
             this.setAttribute("index", 1);
         }
         imgList[i].onmouseout = function(){
            bigpic.removeChild(bigpicChild);
         }
     }
    
</script>
</html>